<template>
	<view class="container">
		<!-- 状态筛选 -->
		<view class="filter-tabs">
			<uv-tabs :list="statusTabs" :current="currentIndex" @change="switchStatusByIndex" keyName="label"
				:scrollable="false" active-color="#fe5400" lineColor="#fe5400" inactive-color="#666"
				font-size="28"></uv-tabs>
		</view>

		<!-- 核实列表 -->
		<scroll-view class="verify-list" scroll-y @scrolltolower="loadMore" refresher-enabled="true"
			:refresher-triggered="triggered" refresher-threshold="100" @refresherrefresh="onRefresh">
			<view class="list-container">
				<!-- 空状态 -->
				<uv-empty v-if="!loading && list.length === 0" mode="data" text="暂无核实记录" marginTop="50"></uv-empty>

				<!-- 核实记录卡片 -->
				<view class="verify-card" v-for="item in list" :key="item.id" @click="navigateToDetail(item.id)">
					<view class="card-header">
						<text class="goods-title">{{getGoodsTitle(item)}}</text>
						<view class="status-badge" :class="statusClassMap[item.status]">
							{{getStatusText(item.verify_status)}}
						</view>
					</view>

					<view class="card-content">
						<view class="goods-info">
							<uv-image :src="getGoodsImage(item)" width="120" height="120" radius="8"
								mode="aspectFill"></uv-image>
							<view class="goods-details">
								<!-- 商品基本信息 -->
								<view class="info-grid">
									<view class="info-item">
										<text class="info-label">型号：</text>
										<uv-text :lines="1" :text="getGoodsModel(item)" size="24rpx"></uv-text>
									</view>
									<view class="info-item">
										<text class="info-label">品牌：</text>
										<text class="info-value">{{item.brand_name || '未知品牌'}}</text>
									</view>
									<view class="info-item">
										<text class="info-label">产地：</text>
										<text class="info-value">{{item.goods.origin || '未知'}}</text>
									</view>
									<view class="info-item">
										<text class="info-label">发货地：</text>
										<text class="info-value">{{item.goods.place_of_shipment || '未知'}}</text>
									</view>
								</view>

								<!-- 商品规格信息 -->
								<view class="specs-grid">
									<view class="spec-item">
										<text class="spec-label">包装：</text>
										<text class="spec-value">{{item.goods.package || '未填写'}}</text>
									</view>
									<view class="spec-item">
										<text class="spec-label">数量：</text>
										<text class="spec-value">{{item.number || 0}}件</text>
									</view>
									<view class="spec-item price-item">
										<text class="spec-label">价格：</text>
										<text class="spec-value price">¥{{item.price || '面议'}}</text>
									</view>
								</view>

								<!-- 用户备注 -->
								<view class="remark-section" v-if="item.user_remark">
									<text class="remark-label">备注：</text>
									<text class="remark-content">{{item.user_remark}}</text>
								</view>
							</view>
						</view>
					</view>

					<view class="card-footer">
						<text class="request-time">提交核实时间：{{formatTime(item.create_time)}}</text>
						<view class="footer-right">
							<text class="verify-tip">查看详情</text>
							<uv-icon name="arrow-right" size="20" color="#999"></uv-icon>
						</view>
					</view>
				</view>

				<!-- 初次加载状态 -->
				<uv-loading-icon v-if="loading && list.length == 0 && !hasMore" text="加载中" mode="circle"
					size="36"></uv-loading-icon>

				<!-- 加载更多 -->
				<view class="load-more" v-if="hasMore">
					<uv-loading-icon mode="circle" size="28"></uv-loading-icon>
					<text class="load-text">加载中...</text>
				</view>

				<view class="no-more" v-if="!hasMore && list.length > 0">
					<text class="no-more-text">没有更多数据了</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				refreshing: false,
				triggered: false,
				currentStatus: 'pending',
				currentIndex: 0,
				statusTabs: [{
						label: '待核实',
						value: 'pending'
					},
					{
						label: '已核实',
						value: 'verified'
					},
					{
						label: '已失效',
						value: 'expired'
					},
					{
						label: '全部',
						value: 'all'
					}
				],
				list: [],
				pagination: {
					page: 1,
					per_page: 10,
					total: 0,
					last_page: 1
				},
				// 状态类名映射
				statusClassMap: {
					'pending': 'status-pending',
					'verified': 'status-verified',
					'expired': 'status-expired'
				}
			};
		},
		computed: {
			hasMore() {
				return this.pagination.page < this.pagination.last_page;
			}
		},
		onLoad(options) {
			if (options.status) {
				this.currentStatus = options.status;
			}
			this.loadData(true);
		},
		methods: {
			// 通过索引切换状态
			switchStatusByIndex(item) {
				this.currentIndex = item.index;
				this.currentStatus = item.value;
				this.loadData(true);
			},

			// 获取商品标题
			getGoodsTitle(item) {
				return (item.goods && item.goods.title) ? item.goods.title : '未知商品';
			},

			// 获取商品图片
			getGoodsImage(item) {
				return (item.goods && item.goods.image) ? item.goods.image : '';
			},

			// 获取商品型号
			getGoodsModel(item) {
				return (item.goods && item.goods.model) ? item.goods.model : '暂无型号';
			},

			// 加载数据
			async loadData(reset = false) {
				if (reset) {
					this.pagination.page = 1;
					this.list = [];
				}

				this.loading = true;

				try {
					const res = await uni.$uv.http.get('/Supplier/getVerifyList', {
						params: {
							page: this.pagination.page,
							verify_status: this.currentStatus
						}
					});

					if (res.res.code === 1) {
						if (reset) {
							this.list = res.res.data.list || [];
						} else {
							this.list = [...this.list, ...(res.res.data.list || [])];
						}

						this.pagination = {
							page: res.data.current_page || 1,
							per_page: res.data.per_page || 10,
							total: res.data.total || 0,
							last_page: res.data.last_page || 1
						};
					} else {
						this.$wanlshop.msg(res.msg || '获取数据失败');
					}
				} catch (error) {
					console.error('获取核实列表失败:', error);
					this.$wanlshop.msg('获取失败，请稍后重试');
				} finally {
					this.loading = false;
					this.refreshing = false;
					this.triggered = false;
				}
			},

			// 切换状态
			switchStatus(status) {
				if (this.currentStatus !== status) {
					this.currentStatus = status;
					this.loadData(true);
				}
			},

			// 下拉刷新
			onRefresh() {
				this.refreshing = true;
				this.triggered = true;
				this.loadData(true);
			},

			// 加载更多
			loadMore() {
				if (!this.loading && this.hasMore) {
					this.pagination.page++;
					this.loadData(false);
				}
			},

			// 跳转到详情页
			navigateToDetail(id) {
				uni.navigateTo({
					url: `/pages/supplier/verify/detail?id=${id}`
				});
			},

			// 获取状态文本
			getStatusText(status) {
				const statusTextMap = {
					'pending': '待核实',
					'verified': '已核实',
					'expired': '已失效'
				};
				return statusTextMap[status] || '未知状态';
			},

			// 格式化时间
			formatTime(timestamp) {
				if (!timestamp) return '未知时间';
				const date = new Date(timestamp * 1000);
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
		box-sizing: border-box;
	}

	/* 筛选标签 */
	.filter-tabs {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 8rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	/* 核实列表 */
	.verify-list {
		height: calc(100vh - 240rpx);
	}

	.list-container {
		padding-bottom: 30rpx;
	}

	/* 核实卡片 */
	.verify-card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s;

		&:active {
			transform: scale(0.99);
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		}

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 25rpx;

			.goods-title {
				flex: 1;
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				line-height: 1.4;
				margin-right: 20rpx;
			}

			.status-badge {
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				font-size: 22rpx;
				font-weight: 500;

				&.status-pending {
					background: #fff0e8;
					color: #ff7900;
				}

				&.status-verified {
					background: #e8f7f0;
					color: #19be6b;
				}

				&.status-expired {
					background: #f5f5f5;
					color: #999;
				}
			}
		}

		.card-content {
			margin-bottom: 20rpx;

			.goods-info {
				display: flex;

				.goods-details {
					flex: 1;
					margin-left: 25rpx;
					display: flex;
					flex-direction: column;
					gap: 16rpx;
				}
			}
		}

		/* 信息网格布局 */
		.info-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 12rpx;

			.info-item {
				display: flex;
				align-items: center;

				.info-label {
					font-size: 24rpx;
					color: #999;
					min-width: 80rpx;
				}

				.info-value {
					font-size: 24rpx;
					color: #666;
					flex: 1;
				}
			}
		}

		/* 规格网格布局 */
		.specs-grid {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f8f9fa;
			padding: 20rpx;
			border-radius: 12rpx;

			.spec-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: 1;

				&.price-item {
					.spec-value {
						color: #ff7900;
						font-weight: 600;
					}
				}

				.spec-label {
					font-size: 22rpx;
					color: #999;
					margin-bottom: 4rpx;
				}

				.spec-value {
					font-size: 24rpx;
					color: #333;
					font-weight: 500;

					&.price {
						font-size: 26rpx;
					}
				}
			}
		}

		/* 备注区域 */
		.remark-section {
			background: #f0f7ff;
			padding: 20rpx;
			border-radius: 12rpx;
			border-left: 4rpx solid #2979ff;

			.remark-label {
				font-size: 24rpx;
				color: #2979ff;
				font-weight: 500;
				margin-right: 8rpx;
			}

			.remark-content {
				font-size: 24rpx;
				color: #666;
				line-height: 1.4;
			}
		}

		.card-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20rpx;
			border-top: 1rpx solid #f5f5f5;

			.request-time {
				font-size: 22rpx;
				color: #999;
			}

			.footer-right {
				display: flex;
				align-items: center;

				.verify-tip {
					font-size: 24rpx;
					color: #999;
					margin-right: 8rpx;
				}
			}
		}
	}

	/* 加载更多 */
	.load-more,
	.no-more {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;

		.load-text,
		.no-more-text {
			font-size: 26rpx;
			color: #999;
			margin-left: 15rpx;
		}
	}
</style>